<template>
	<div class="user-order">
		<div class="uo-header border-1px">
			<div class="back"
				onclick="javascript:history.go(-1)"
			>
				<i class="iconfont">&#xe697;</i>
			</div>
			<div class="content">
				<div class="c-items common-color">
					<p class="c-item TB"
						@click="change(1)"
						:class="{ active: isTb}"
					>我的订单</p>
					<p class="c-item JD"
						@click="change(2)"
						:class="{ active: isJd}"
					>团队订单</p>
				</div>
			</div>
		</div>
		<div class="no-place"></div>
		<div class="uo-nav">
			<div class="uo-nav-item"
				@click="check(0)"
				:class="{ active: this.status == 0}"
			>
				全部
			</div>
			<div class="uo-nav-item"
				@click="check(1)"
				:class="{ active: this.status == 1}"
			>
				已结算
			</div>
			<div class="uo-nav-item"
				@click="check(2)"
				:class="{ active: this.status == 2}"
			>
				已付款
			</div>
			<div class="uo-nav-item"
				@click="check(3)"
				:class="{ active: this.status == 3}"
			>
				已失效
			</div>
		</div>
		<div class="uo-content">
			<div class="uo-c-item"
				v-for="(good, index) in list"
			>
				<div class="uo-c-header border-1px">
					<p>订单号:{{good.order_sn}}</p>
					<p>下单时间:{{good.createtime}}</p>
				</div>
				<div class="uo-c-content">
					<img v-lazy="good.picUrl" 
						:key="good.picUrl"
					/>
					<div class="uo-cc-right">
						<p class="title one-line"><span v-show="good.type == 1" class="TB"></span><span v-show="good.type == 2" class="TM"></span><span v-show="good.type == 3" class="PDD"></span><span v-show="good.type == 4" class="JD"></span>{{good.title}}</p>
						<p class="coupon">佣金<span class="common-color">{{good.price}}</span>元</p>
						<p class="status a" v-show="good.order_status == 1">已结算</p>
						<p class="status b" v-show="good.order_status == 2">已付款</p>
						<p class="status c" v-show="good.order_status == 3">已失效</p>
					</div>
				</div>
			</div>
			<div class="goods-none"
				v-if="list === undefined || list.length == 0"
			>
				<img src="../assets/img/nodata.png" />
			</div>				
		</div>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	export default{
		data(){
			return{
				isTb: true,
				isJd: false,
				status: 0,
				page: 1,
				type: 1,
				list: []
			}
		},
		mounted(){
			if(this.type == 1){
				var params = new URLSearchParams();
				params.append('status', this.status);
				params.append('page', this.page);
				params.append('type', this.type);
				axios.post(Http.ORDERLIST, params)
				.then( res => {
					var ret = res.data;
					this.list = ret.data;
				})
			}else if (this.type == 2){
				var params = new URLSearchParams();
				params.append('status', this.status);
				params.append('page', this.page);
				axios.post(Http.FANSORDER, params)
				.then( res => {
					var ret = res.data;
					this.list = ret.data;
				})
			}
			
		},
		methods: {
			change: function(id){
				if( id === 1){
					this.isTb = true;
					this.isJd = false;
					this.type = 1;
					this.getData()
				}else if( id === 2){
					this.isTb = false;
					this.isJd = true;
					this.type = 2;
					this.getFdata()
				}
			},
			check: function(id){
				if(id===0){
					this.status = 0;
					if(this.type == 1){
						this.getData()
					}else if( this.type == 2){
						this.getFdata()
					}
				}else if(id===1){
					this.status = 1;
					if(this.type == 1){
						this.getData()
					}else if( this.type == 2){
						this.getFdata()
					}
				}else if(id===2){
					this.status = 2;
					if(this.type == 1){
						this.getData()
					}else if( this.type == 2){
						this.getFdata()
					}
				}else if(id===3){
					this.status = 3;
					if(this.type == 1){
						this.getData()
					}else if( this.type == 2){
						this.getFdata()
					}
				}
			},
			getData(){
				var params = new URLSearchParams();
				params.append('status', this.status);
				params.append('page', this.page);
				params.append('type', this.type);
				axios.post(Http.ORDERLIST, params)
				.then( res => {
					var ret = res.data;
					this.list = ret.data;
				})
			},
			getFdata(){
				var params = new URLSearchParams();
				params.append('status', this.status);
				params.append('page', this.page);
				axios.post(Http.FANSORDER, params)
				.then( res => {
					var ret = res.data;
					this.list = ret.data;
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.user-order{
		.uo-header{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 2;
			width: 100%;
			height: 0.88rem;
			line-height: 0.88rem;
			background: #fff;
			.back{
				position: absolute;
				top: 0;
				left: 0;
				width: 0.88rem;
				height: 0.88rem;
				line-height: 0.88rem;
				i{
					font-size: 0.44rem;
				}
			}
			.content{
				margin: 0 1rem;
				.c-items{
					display: flex;
					margin-left: 20%;
					margin-top: 0.14rem;
					width: 60%;
					height: 0.6rem;
					line-height: 0.6rem;
					border-radius: 0.6rem;
					border: 0.01rem solid #ff3d00;
					.c-item{
						flex: 0 0 50%;
						height: 100%;
						&.TB{
							border-radius: 0.6rem 0 0 0.6rem;
						}
						&.JD{
							border-radius: 0 0.6rem 0.6rem 0;
						}
						&.active{
							background: #ff3d00;
							color: #fff;
						}
					}
				}
			}
		}
		.uo-nav{
			position: fixed;
			top: 0.88rem;
			z-index: 2;
			background: #fff;
			display: flex;
			width: 100%;
			.uo-nav-item{
				flex: 0 0 25%;
				height: 0.66rem;
				line-height: 0.66rem;
				&.active{
					color: rgb(255,101,68);
					border-bottom: 0.02rem solid rgb(255,101,68);
					border-box: box-sizing;
				}
			}
		}
		.uo-content{
			background: #f1f7f8;
			min-height: 12rem;
			padding-top: 0.86rem;
			.uo-c-item{
				background: #fff;
				margin-bottom: 0.2rem;
				.uo-c-header{
					display: flex;
					justify-content: space-between;
					height: 0.44rem;
					line-height: 0.44rem;
					padding: 0 0.24rem;
					font-size: 0.20rem;
					color: #999;
					p{
						flex: 0 0 50%;
					}
				}
				.uo-c-content{
					display: flex;
					align-items: center;
					padding: 0.24rem;
					img{
						flex: 0 0 1.2rem;
						margin-right: 0.2rem;
						width: 1.2rem;
						height: 1.2rem;
						border-radius: 0.1rem;
					}
					.uo-cc-right{
						flex: 1;
						height: 1.2rem;
						position: relative;
						.title{
							span{
								margin-right: 0.1rem;
								display: inline-block;
								width: 0.28rem;
								height: 0.28rem;
								&.TB{
									background: url(../assets/img/taobao.png) center center no-repeat;
									background-size: contain;
								}
								&.TM{
									background: url(../assets/img/tmall.png) center center no-repeat;
									background-size: contain;
								}
								&.JD{
									background: url(../assets/img/jd.png) center center no-repeat;
									background-size: contain;
								}
								&.PDD{
									background: url(../assets/img/pinduoduo_icon.png) center center no-repeat;
									background-size: contain;
								}
							}
						}
						.coupon{
							margin-top: 0.3rem;
							text-align: left;
							font-size: 0.26rem;
							span{
								font-size: 0.32rem;
								font-weight: bold;
							}
						}
						.status{
							position: absolute;
							bottom: 0;
							right: 0;
							width: 1.2rem;
							height: 0.54rem;
							line-height: 0.54rem;
							border-radius: 0.1rem;
							color: #fff;
							&.a{
								background: $color;
							}
							&.b{
								background: #1ab32d;
							}
							&.c{
								background: #666;
							}
						}
					}
				}
			}
			.goods-none{
				width: 100%;
				img{
					width: 60%;
				}
			}
		}
	}
</style>